<template>
  <section class="todoapp">
    
    <my-header @add="add"></my-header>
    <my-main :list="list2" @del="del"  @state='state' @changeAll="changeAll"></my-main>
    <my-footer :list="list" @clear="clear" :flag="flag" @changeFlag="(val)=>flag=val"></my-footer>
  </section>
</template>

<script>
import MyFooter from './components/MyFooter.vue'
import MyHeader from './components/MyHeader.vue'
import MyMain from './components/MyMain.vue'
export default {
  components: { MyHeader, MyMain, MyFooter },
  
    data(){
      return{
        list:JSON.parse(localStorage.getItem('todo-list')) || [] ,
      //   list: [
      //   { id: 12, name: '吃饭', isDone: false },
      //   { id: 14, name: '听歌', isDone: true },
      //   { id: 23, name: '洗澡', isDone: true },
      //   { id: 34, name: '睡觉', isDone: false },
      //   { id: 35, name: '游戏', isDone: false },
      // ],
      flag:1
      }
    },
    methods:{
      // 删除
      del(id){
        this.list = this.list.filter(item=>{
          return item.id !== id
        })
      },
      // 添加
      add(todo){
        this.list.unshift({
          id: +new Date(),
          name:todo,
          isDone:false
        })
      },
      // 修改状态
      state(id){
        const res = this.list.find(item=>{
          return item.id===id
        })
        res.isDone = !res.isDone
      },
      // 清除已完成
      clear(){
        this.list = this.list.filter(item=>item.isDone===false)
      },
      changeAll(val){
        this.list.forEach(item=> item.isDone=val)
      }
    },
    computed:{
      list2(){
        if (this.flag===2) {
          return this.list.filter(item=>item.isDone===false)
        } else if(this.flag===3){
          return this.list.filter(item=>item.isDone===true)
        }else{
          return this.list
        }
      }
    },
    watch:{
      list:{
        handler(val){
          localStorage.setItem('todo-list',JSON.stringify(val))     
        },
        deep:true //深度侦听
      }
    }
  
  
  
  
  }
</script>

<style></style>
